<template>
    <h2>基础用法</h2>
    <div class="容器">
        <div class="tw:p-8">p-8</div>
    </div>
    <h2>横向内边距</h2>
    <div class="容器">
        <div class="tw:px-8">px-8</div>
    </div>
    <h2>纵向边距</h2>
    <div class="容器">
        <div class="tw:py-8">py-8</div>
    </div>
    <h2>本地化</h2>
    <div class="容器">
        <div dir="ltr">
            <div class="tw:ps-8">ps-8</div>
            <div class="tw:pe-8">pe-8</div>
        </div>
        <div dir="rtl">
            <div class="tw:ps-8">ps-8</div>
            <div class="tw:pe-8">pe-8</div>
        </div>
    </div>
    <hr>
    <h2>基础用法</h2>
    <div class="容器">
        <div class="tw:m-16">m-8</div>
    </div>
    <h2>特定方向</h2>
    <div class="tw:grid tw:grid-cols-2 tw:grid-rows-2 tw:bg-gray-100">
        <div class="项目 tw:mt-4">mt-4</div>
        <div class="项目 tw:mr-4">mr-4</div>
        <div class="项目 tw:mb-8">mb-8</div>
        <div class="项目 tw:ml-4">ml-4</div>
    </div>
    <h2>横向</h2>
    <div class="容器">
        <div class="tw:mx-8">mx-8</div>
    </div>
    <h2>纵向</h2>
    <div class="容器">
        <div class="tw:my-8">my-8</div>
    </div>
    <h2>负数外边距</h2>
    <div class="tw:border tw:border-blue-100">
        <div class="tw:h-16 tw:w-36 tw:bg-sky-400 tw:opacity-20"></div>
        <div class="tw:bg-sky-300 tw:h-16 tw:w-24 tw:-mt-8">-mt-8</div>
    </div>

    <h2>本地化</h2>
    <div>
        <div dir="ltr">
            <div class="tw:ms-8">ms-8</div>
            <div class="tw:me-8">me-8</div>
        </div>
        <div dir="rtl">
            <div class="tw:ms-8">ms-8</div>
            <div class="tw:me-8">me-8</div>
        </div>
    </div>

    <h2>子元素间距</h2>
    <div class="tw:flex tw:space-x-8">
        <div>01</div>
        <div>02</div>
        <div>03</div>
    </div>
    <h2>子元素倒序排列</h2>
    <div class="tw:flex tw:flex-row-reverse tw:space-x-4 tw:space-x-reverse">
        <div>01</div>
        <div>02</div>
        <div>03</div>
    </div>
</template>
<style>
    @reference '@/tailwind.css';
    .容器 {
        @apply tw:bg-gray-100 tw:flex;
    }
    .项目 {
        @apply tw:bg-purple-300 tw:w-16 tw:h-8 tw:flex tw:justify-center tw:items-center
    }
</style>